<template>
  <div class="xinde">
    <div class="head">
      <img @click="goxq" src="../../assets/img/duanhuo/shouye/back.png" alt="">
      <span>啊拉粉心得</span>
      <img src="../../assets/img/duanhuo/shouye/share.png" alt="">
    </div>
    <div class="nicheng">
      <div class="touxiang">
        <img src="../../assets/img/duanhuo/shopxq/headImg.png" alt="">
        <span>昵称</span>
      </div>
      <p class="txt">该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价...</p>
      <div class="sptu">
        <img @click="goxinde" src="../../assets/img/duanhuo/shouye/listImg2.png" alt="">
      </div>
      <div class="shijian">
        <span>8小时前</span>
      </div>
      <div class="dibu">
        <div @click="goxinde" class="kouhong"><img src="../../assets/img/duanhuo/shouye/listImg2.png" alt=""></div>
        <div class="youbian">
          <p>焕彩萃璨花蕊唇彩4.8g</p>
          <img src="../../assets/img/duanhuo/shopxq/england.png" alt="">
          <img src="../../assets/img/duanhuo/shopxq/fly1.png" alt="">
        <span>海外直邮</span>
          <p>￥166.06</p>
        </div>
      </div>
    </div>
    <div class="userping">
      <ul>
        <li>用户评论(1)</li>
        <li class="two">
          <img src="../../assets/img/duanhuo/shopxq/headImg.png" alt="">
          <div>
          <p>昵称</p>
          <span>刚刚</span>
          </div>
        </li>
        <li class="three">
          <p>该模块主要内容是其他顾客对该商品的评论...该模块主要内容是其他顾客对该商品的评论</p>
        </li>
        <li class="four">
          <ul>
            <li>
              <img src="../../assets/img/duanhuo/xinde/zan.png" alt="">
              <p>点赞</p>
            </li>
            <li>
              <img src="../../assets/img/duanhuo/xinde/comment.png" alt="">
              <p>写评论</p>
            </li>
            <li>
              <img src="../../assets/img/duanhuo/xinde/share.png" alt="">
              <p>分享</p>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="jiazai">
      <router-link :to="{name: 'quanbuxinde'}">
        加载更多
      </router-link>
    </div>
  </div>
</template>
<script>
  export default {
    methods:{
      goxq(){
        this.$router.push({path:'/details'})
      },
      goxinde(){
        this.$router.push({path:'/quanbuxinde'})
      }
    }
  }
</script>
<style scoped>
  .xinde{
    background: #ccc;
  }
  .head{
    height: 2rem;
    background: #e53e42;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
  }
  .head img{
    height: 1rem;
    margin: 0 0.5rem;
  }
  .nicheng{
    background: #fff;
    margin-bottom: 0.5rem;
  }
  .nicheng .touxiang{
    padding: 0.5rem 0.2rem;
    display: flex;
    align-items: center;
  }
  .nicheng .touxiang span{
    font-size: 0.8rem;
    margin-left: 0.3rem;
  }
  .nicheng .txt{
    font-size: 0.7rem;
    margin: 0.3rem;
  }
  .nicheng .sptu{
    width: 30%;
    margin: 0.3rem;
    padding: 1rem;
    border: 1px solid #ccc;
    border-right: none;
    text-align: center;
  }
  .nicheng .sptu img{
    height: 3rem;
  }
  .nicheng .shijian{
    margin: 0.5rem 0.3rem;
    font-size: 0.5rem;
  }
  .nicheng .dibu{
    margin: 0.3rem;
    display: flex;
    justify-content: flex-start;
  }
  .nicheng .dibu .kouhong{
    border-left: 1px solid #ccc;
    padding: 0 1rem;
  }
  .nicheng .dibu .kouhong img{
    height: 3rem;
  }
  .nicheng .dibu .youbian{
    border-left: 1px solid #ccc;
    padding-left: 0.5rem;
  }
  .nicheng .dibu .youbian p{
    font-size: 0.6rem;
  }
  .nicheng .dibu .youbian p:last-child{
    color: #e53e42;
  }
  .nicheng .dibu .youbian img{
    width: 0.8rem;
  }
  .nicheng .dibu .youbian span{
    font-size: 0.6rem;
  }
  .userping{
    background: #fff;
  }
  .userping ul li:first-child{
    border-bottom: 1px solid #ccc;
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  .userping ul .two{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.1rem 0.3rem;
  }
  .userping ul .two div{
    margin: 0 0.6rem;
    text-align: center;
  }
  .userping ul .two img{
    height: 2rem;
  }
  .userping ul .two p{
    font-size: 0.8rem;
  }
  .userping ul .two span{
    font-size: 0.5rem;
  }
  .userping ul .three{
    padding: 0 0.3rem;
     }
  .userping ul .three p{
    font-size: 0.5rem;
  }
  .four{
    margin-top: 0.5rem;
  }
  .four ul{
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;

  }
  .four ul img{
    width: 0.6rem;
  }
  .four ul li{
    width: 30%;
  }
  .four>ul li:first-child{
    border-bottom: none;
    border-right: 1px solid #ccc;
    padding: 0;
  }
  .four>ul li:last-child{
    border-left: 1px solid #ccc;
  }
  .four ul li p{
    font-size: 0.5rem;
  }
  .jiazai{
    text-align: center;
    font-size: 0.6rem;
    padding: 0.36rem;
  }

</style>
